<script setup lang="ts">
	import { ref } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
	import { IconSelect } from "@/components/ReIcon";
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "",
			status: 1,
		})
	});
	
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);

	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });
	const linkTypeOption = ref([
		{
			id: 1,
			name: '内部链接'
		},
		{
			id: 2,
			name: '外部链接'
		}
	])
	const pageMenuOption = ref([
		{
			id: 1,
			name: '是'
		},
		{
			id: 2,
			name: '否'
		}
	])
	const statusOption = ref([
		{
			id: 1,
			name: '启用'
		},
		{
			id: 2,
			name: '禁用'
		}
	])
	const levelOptin = ref([
		{
			id: 1,
			name: '一级菜单'
		},
		{
			id: 2,
			name: '二级菜单'
		},
		{
			id: 3,
			name: '三级菜单'
		},
		{
			id: 4,
			name: '四级菜单'
		}
	])
	const dataPermissionOption = ref([
		{
			id: 1,
			name: '启用'
		},
		{
			id: 2,
			name: '不启用'
		}
	])
	const handleChange = (value) => {
		
		if(value && value.length===1) {
			newFormInline.value.firstMenuId = value[0]
		}
		if(value && value.length===2) {
			newFormInline.value.firstMenuId = value[0]
			newFormInline.value.secondMenuId = value[1]
		}
	}
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto">
		<el-row :gutter="30">

			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="菜单名称" prop="name">
					<el-input v-model="newFormInline.name" clearable placeholder="请输入菜单名称" />
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.title === '新增'">
				<el-form-item label="菜单等级" prop="level">
					<el-select
					  v-model="newFormInline.level"
					  placeholder="请选择菜单等级"
					  class="w-full"
					  clearable
					>
					  <el-option
					    v-for="(item, index) in levelOptin"
					    :key="index"
					    :label="item.name"
					    :value="item.id"
					  />
					</el-select>
				</el-form-item>
			</re-col>
			<!-- <re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="路径" prop="path">
					<el-input v-model="newFormInline.path" clearable placeholder="请输入路径" />
				</el-form-item>
			</re-col> -->
			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.level < 3">
				<!-- <el-form-item label="图标标识" prop="icon">
					<el-input v-model="newFormInline.icon" clearable placeholder="请输入图标标识" />
				</el-form-item> -->
				<el-form-item label="菜单图标">
					<IconSelect v-model="newFormInline.icon" class="w-full" />
				</el-form-item>
			</re-col>
			<!-- <re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="状态" prop="status">
					<el-select
					  v-model="newFormInline.status"
					  placeholder="请选择状态"
					  class="w-full"
					  clearable
					>
					  <el-option
					    v-for="(item, index) in statusOption"
					    :key="index"
					    :label="item.name"
					    :value="item.id"
					  />
					</el-select>
				</el-form-item>
			</re-col> -->
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="链接类型" prop="linkType">
					<el-select
					  v-model="newFormInline.linkType"
					  placeholder="请选择链接类型"
					  class="w-full"
					  clearable
					>
					  <el-option
					    v-for="(item, index) in linkTypeOption"
					    :key="index"
					    :label="item.name"
					    :value="item.id"
					  />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="是否为页面菜单" prop="isPageMenu">
					<el-select
					  v-model="newFormInline.isPageMenu"
					  placeholder="请选择"
					  class="w-full"
					  clearable
					>
					  <el-option
					    v-for="(item, index) in pageMenuOption"
					    :key="index"
					    :label="item.name"
					    :value="item.id"
					  />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.level >= 3">
				<el-form-item label="链接地址" >
					<el-input v-model="newFormInline.linkUrl" clearable placeholder="请输入链接地址" />
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="排序" prop="sort">
					<el-input-number
						v-model="newFormInline.sort"
						class="!w-full"
						:min="1"
						:max="9999"
						controls-position="right"
					  />
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.title === '新增'">
				<!-- <el-form-item label="一级菜单ID" prop="firstMenuId">
					<el-input v-model="newFormInline.firstMenuId" clearable placeholder="请输入一级菜单ID" />
					
				</el-form-item> -->
				<el-form-item label="上级菜单" prop="firstMenuId" v-if="newFormInline.level>1">
				  <el-cascader
					v-model="newFormInline.parMenuId"
					class="w-full"
					:options="newFormInline.higherDeptOptions"
					:props="{
					  value: 'menuId',
					  label: 'name',
					  emitPath: true,
					  checkStrictly: true
					}"
					clearable
					filterable
					placeholder="请选择上级菜单"
					@change="handleChange"
				  >
					<template #default="{ node, data }">
					  <span>{{ data.name }}</span>
					  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
					</template>
				  </el-cascader>
				</el-form-item>
			</re-col>
			<!-- <re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="二级菜单ID" prop="secondMenuId">
					<el-input v-model="newFormInline.secondMenuId" clearable placeholder="请输入二级菜单ID" />
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="三级菜单ID" prop="thirdMenuId">
					<el-input v-model="newFormInline.thirdMenuId" clearable placeholder="请输入三级菜单ID" />
				</el-form-item>
			</re-col>
			<re-col :value="12" :xs="24" :sm="24">
				<el-form-item label="四级菜单ID" prop="fourthMenuId">
					<el-input v-model="newFormInline.fourthMenuId" clearable placeholder="请输入四级菜单ID" />
				</el-form-item>
			</re-col> -->
			<re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.level >= 3">
				<el-form-item label="数据权限" prop="dataPermission">
					<el-select
					  v-model="newFormInline.dataPermission"
					  placeholder="请选择"
					  class="w-full"
					  clearable
					>
					  <el-option
					    v-for="(item, index) in dataPermissionOption"
					    :key="index"
					    :label="item.name"
					    :value="item.id"
					  />
					</el-select>
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>
<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>